<!--
 * @Project_description: {{routerName}}添加编辑
-->
<template>
  <div class="{{name}}-add">
    <el-dialog :title="title" :visible.sync="dialogVisible" width='33%' :before-close="handleClose" v-drag>
      <el-form label-width="100px" :model="form" :rules="rules" ref="form" :disabled="loading">
        <el-form-item label="昵称" prop="name">
          <el-input v-model="form.name"  clearable  show-word-limit maxlength='10' type='text'></el-input>
        </el-form-item>
        <el-row >
          <el-col  :span='12'>
            <el-form-item   label='状态'  prop='state' >
              <el-radio-group v-model='form.state'>
                <el-radio :label='0'>启用</el-radio>
                <el-radio :label='1'>禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span='12'>
            <el-form-item label='显示排序' prop='sortKey'>
              <el-input-number v-model='form.sortKey' :min='0' controls-position='right' />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="日期" prop="date">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label='备注' prop='remarks'>
          <el-input v-model='form.remarks' :rows='3' maxlength='150' placeholder='请输入备注' type='textarea'  clearable/>
        </el-form-item>
      </el-form>
      <!-- 下放按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSuccess" :loading="loading">保 存</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import validator from '@/libs/utli.validator.js'
  export default {
    name:'{{name}}-add',
    // import引入的组件需要注入到对象中才能使用
    components: {},
    props: {},
    data() {
      // 这里存放数据
      return {
        dialogVisible: false,
        loading: false,
        title: '添加',
        form: {
          state:0,
          sortKey:0,
        },
        isPut: false,
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { validator: validator.phone, trigger: 'blur' },
          ],
          value: [{ required: true, message: '不能为空', trigger: 'blur' }],
        },
      }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    // 方法集合
    methods: {
      //初始化
      init(row) {
        let _this=this
        if (row) {
          this.isPut = true
          this.title = '编辑'
          this.form = row
        } else {
          this.isPut = false
          this.form = {
            state:0,
            sortKey:0,
          }
        }
        this.dialogVisible = true
        //移除表单校验结果
        setTimeout(()=>{
          _this.$refs.form.clearValidate()
          //请查看控制台，注意被el-row 包裹无法查看到
          _this._getRules(this.$refs.form)
        })
      },
      // 关闭
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then((_) => {
            done()
          })
          .catch((_) => {})
      },
      //提交
      async onSuccess() {
        let _this = this
        _this.$refs.form.validate(async (valid) => {
          if (valid) {
            _this.loading = true
            try {
              if (_this.isPut) {
                // 修改
                await _this.$api.{{name}}.put(_this.form)
                _this.$message.success('修改成功')
              } else {
                // 添加
                await _this.$api.{{name}}.add(_this.form)
                _this.$message.success('添加成功')
              }
              await _this.$emit('load')
              _this.dialogVisible = false
              _this.loading = false
            } catch (error) {
              _this.loading = false

            }
          } else {
            console.log('validate error')
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  //@import url(); 引入公共css类
</style>
